Ext.BLANK_IMAGE_URL = '${ctx}resources/images/default/s.gif';
Ext.onReady(function() {
	setTimeout(function() {
		new Ext.Viewport({
			layout : 'border',
			items : [{
						region : 'north',
						html : '<h1 class="x-panel-header">Page Title</h1>',
						autoHeight : true,
						border : false,
						margins : '0 0 5 0'

					}, {
						region : 'west',
						collapsible : true,
						title : 'Navigation',
						xtype : 'treepanel',
						width : 200,
						autoScroll : true,
						split : true,
						loader : new Ext.tree.TreeLoader(),
						root : new Ext.tree.AsyncTreeNode({
									expanded : true,
									children : [{
												text : 'Menu Option 1',
												leaf : true
											}, {
												text : 'Menu Option 2',
												leaf : true
											}, {
												text : 'Menu Option 3',
												leaf : true
											}]
								}),
						rootVisible : false,
						listeners : {
							click : function(n) {
								Ext.Msg.alert('Navigation Tree Click',
										'You clicked: "' + n.attributes.text
												+ '"');
							}
						}
					}, {
						region : 'center',
						xtype : 'tabpanel',
						items : {
							title : 'Default Tab',
							html : 'The first tab\'s content. Others may be added dynamically'
						}
					}, {
						region : 'south',
						title : 'Information',
						collapsible : true,
						html : 'Information goes here',
						split : true,
						height : 100,
						minHeight : 100
					}]
		});

	}, 250);

});
